<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>tab 选项卡 demo</title>
<link rel="stylesheet" href="css/base.css" />
<style>

	.tabswitch{}
	.tabswitch .tabnav{}
	.tabnav li{width:70px; height: 30px; line-height: 30px; text-align: center; color: #fff; cursor: pointer; background-color: #a1a1a1; display: inline-block; border-radius: 4px;}
	.tabnav li.curr{background-color: #27A8EF; color: #fff;}
	
	.tabcontent{width:400px; margin-top: 5px;}
	.tabcontent .tabcon{height: 200px; background-color: #fb97c1; display: none; border-radius: 4px; padding: 10px;}
</style>
</head>
<body>
<div class="wrap">
	<h2 class="wrap-h2">tab 选项卡</h2>
	<div class="wrap-main">
		<div class="tabswitch" id="tabswitch">
			<div class="tabnav clearfix" id="tabnav">
				<ul>
					<li class="js-tnav-a curr">1</li>
					<li class="js-tnav-a">2</li>
					<li class="js-tnav-a">3</li>
				</ul>
			</div>
			<div class="tabcontent" id="tabcontent">
				<div class="tabcon" style="display: block;">正文1</div>
				<div class="tabcon">正文2</div>
				<div class="tabcon">正文3</div>
			</div>
		</div>
	</div>
</div>
<script>
	window.onload = function ()
	{
		var oTab = document.getElementById("tabswitch");
		var oTabNav = document.getElementById("tabnav");
		var oBtn = oTabNav.getElementsByTagName("li");
		var oTabContent = document.getElementById("tabcontent");
		var oCon = oTabContent.getElementsByTagName("div");
		
		
		for(var i=0; i<oBtn.length; i++)
		{
			oBtn[i].index = i;
			oBtn[i].onclick = function ()
			{
				for(var i=0; i<oBtn.length; i++)
				{
					oBtn[i].className = "js-tnav-a";
					oCon[i].style.display = "none";
				}
				
				this.className += " curr";
				oCon[this.index].style.display = "block";
			}
		}
		
	}
</script>
</body>
</html>
